Selected work Mobile · WeChat · Student-facing

PBSA WeChat Mini Program

Student-facing. Mobile-first. Designed for Chinese international students.

The same platform, the other side. While the Admin Portal served operators, this Mini Program served students — Chinese international students browsing UK accommodation from thousands of miles away, inside WeChat, on their phones.

Different user. Different constraints. Same honest lessons.

Role
Designer
Timeline
Oct 2023 — Jan 2024
Client
Unite Students (26 cities, UK)
Platform
WeChat Mini Program
Unite Students WeChat Mini Program — three phone screens: splash with brand over a common-room photo, homepage with Simplified-Chinese search and city selector, and an Aston Student Village property detail page
Phone mockups — splash, homepage with city selector, and a property detail page, all in Simplified Chinese.
7,000+
high-intent enquiries
26
UK cities covered
3-step
enquiry-to-operator flow

The Starting Point

Unite Students is one of the UK's largest student accommodation providers — 26 cities, hundreds of properties, thousands of rooms. They were our biggest client.

Chinese international students were the primary audience. They live on WeChat. They don't download new apps. They browse on mobile. They need everything in Simplified Chinese. And they're making a major life decision — finding a home in a country they've never been to — from a phone screen.

The Mini Program had to feel trustworthy, simple, and familiar. Not like a foreign website. Like something they'd use every day.

Unite Students brand guidelines — colour palette page showing primary, secondary and highlight colours with a colour ratio wheel Unite Students brand guidelines — pictograms page showing the line-icon suite and navigation arrows
Unite Students brand system — values, personality, colour palette, and pictograms. The Mini Program was designed within this.
Unite Students Mini Program — three phone screens: city list with property counts in Simplified Chinese, a Birmingham property listing, and a map view with price pins
Properties across UK cities — city list, listing view, and map with price pins, all in Simplified Chinese.

What Actually Shipped

Discovery flow

  • Splash screen → Homepage with city selector
  • Featured properties + university-based browsing
  • Articles and promotions for lifestyle content

Search & Exploration

  • List view + Map view toggle
  • Filters (room type, price, tenancy length, distance to university)
  • Property detail + room detail pages

Support

  • WeChat-native chat with sales consultants
  • FAQ self-service hub
  • Saved favourites

Enquiries

  • Simplified enquiry form
  • Direct connection to Admin Portal inbox (the other side)
  • Confirmation and follow-up tracking
Timeline
Oct 2023 - Jan 2024
Client
Unite Students (26 cities UK)
Platform
WeChat Mini Program
Figma workspace for the Unite Students Mini Program — artboards across Splash, Homepage, City Selection, Latest News, City Property Listing, filter and customer service flows, with the design system styles panel open
The Figma workspace — Discovery, Search, Support, and Enquiries flows laid out across artboards.
Three Things I Got Wrong
01

I Handed Off Designs To A Cowboy

The frontend developer building the Mini Program interpreted designs freely. Not maliciously. Just without asking.

Components I designed didn't match WeChat's native component library. He knew this. He didn't tell me upfront. He either built his own version (inconsistent with design) or came back post-design to say "cannot."

What actually happened

  • I designed a custom filter modal. He said "cannot" — WeChat has its own native picker.
  • I designed custom tab components. He implemented his own version without telling me.
  • Discovered gaps during QA, not during handoff.
What I assumed
Developers will flag constraints before building.
What's actually true
Some developers won't speak up unless you ask directly. He wasn't obstructive — he just operated independently. He needed specifications, not just designs.
The lesson
Handoff isn't throwing Figma files over the wall. It's a conversation. I should've asked: "Are there any WeChat platform limits I need to know before I finalize this?" before every major screen.
Three Mini Program screens — property listing with a sort sheet, a filter panel with room type and price range, and a map view with price pins, all in Simplified Chinese
Sort, filter, and map view — three interaction patterns I designed without mapping WeChat's platform constraints first. Each one hit walls during development.
02

I Knew WeChat's Rules — After Designing

WeChat Mini Programs have strict UI guidelines. Native components. Navigation patterns. Interaction limits. These aren't optional — they're enforced by the platform.

I should've mapped these constraints at the start of the project. Instead, I designed with full creative freedom, then hit walls during development.

What this cost

  • Redesign cycles mid-project
  • The developer implementing workarounds (inconsistent UI)
  • Features that looked great in Figma but shipped differently
What I'd do differently
Before designing any WeChat Mini Program, spend a week mapping platform constraints. What components are native? What interactions are unsupported? What navigation patterns does WeChat enforce? Then design within that reality.
Three Mini Program screens — property list view, map view with price pins, and map with a selected property card, all in Simplified Chinese
List view, map view, and property selection — the map interaction looked straightforward in Figma. The platform made it anything but.
03

I Had Real Stakeholders And Didn't Document Them

I had real stakeholder conversations with Unite Students' Chinese-speaking reps. Their insights shaped key decisions — city-first navigation, Simplified Chinese, university-proximity filters.

What I'd do differently
Document those conversations properly. Decisions are only as strong as the evidence behind them.
Three Mini Program screens — homepage with hot cities, city selection grid with property counts, and a Birmingham property listing, all in Simplified Chinese
City-first navigation came from a Unite Students representative. I know why this decision was made. I just never wrote it down.

What Actually Worked

The enquiry flow: Students could submit an enquiry in under 3 steps. It connected directly to the Admin Portal inbox. The end-to-end loop — student enquires → operator sees it immediately — worked as designed.

City-first browsing: Starting with city selection before property browsing reduced overwhelm. 26 cities, hundreds of properties — without a city anchor, the homepage would've been paralyzing.

WeChat-native chat: Connecting students directly to sales consultants via WeChat chat removed friction. No email. No external form. Just WeChat — the app they were already in.

Unite Students Mini Program enquiry flow — three phone screens: enquiry form with property context and student fields, a confirmation review screen, and a submission success state, all in Simplified Chinese
Enquiry submission flow — form, confirmation review, and success state, all in Simplified Chinese.

The Real Realization

The Admin Portal and Mini Program were built by different teams, at different times, with different developers. But the same patterns repeated:

  • Silent handoffs produced gaps
  • Undocumented decisions became assumptions
  • Platform constraints discovered late = expensive rework

The difference: In Admin, the stakeholders appeared post-launch to complain. In Mini Program, the stakeholders were present and helpful — and I still didn't capture what they gave me.

That's the more uncomfortable lesson. Not "stakeholders were difficult." But "I had good input and didn't treat it like evidence."

I had good input and didn't treat it like evidence.